<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="addBtn">添加</button>
    <button id="removeBtn">删除</button>
    <table>
        <thead>
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
            </tr>
        </thead>
        <tbody id="studentTbody">
            <!-- <tr>
                <td>001</td>
                <td>张三</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        let students = [
            { id: '001', name: '张三', age: 20, gender: '男' },
            { id: '002', name: '张三', age: 20, gender: '男' },
            { id: '003', name: '张三', age: 20, gender: '男' },
            { id: '004', name: '张三', age: 20, gender: '男' },
        ]

        const studentTbodyEle = document.querySelector('#studentTbody');
        const addBtn = document.querySelector('#addBtn')
        const removeBtn = document.querySelector('#removeBtn')

        render();

        function render() {
            studentTbodyEle.innerHTML = students.map((item) => {
                return (
                    `<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                </tr>`
                )
            }).join('');
        }


        addBtn.onclick = function () {
            students.push({
                id: '005',
                name: '李四',
                age: 18,
                gender: '女'
            })

            render();
        }


        removeBtn.onclick = function () {
            if (students.length > 0) {
                students.pop();
                render();
            } else {
                alert('当前已经没有学生了！')
            }
        }
    </script>
</body>

</html>